<template>
  <el-form
    v-if="showForm"
    ref="form"
    v-bind="config"
    :model="form"
    :rules="rules">
    <el-row>
      <el-col
        v-for="(item,index) in fields"
        :key="index"
        :span="item.span">
        <el-form-item
          v-show="!item.hide"
          :label="item.label"
          :prop="item.key">
          <template
            v-if="item.type=='slot'">
            <slot
              :name="item.soltName"
              :form="form"
              item="item" />
          </template>
          <template v-else-if="item.type=='file'">
            <template v-if="item.config && item.config.fileList && item.config.fileList.length">
              <file-list
                :file-data="item.config.fileList"
                :show-remove="false">
              </file-list>
            </template>
          </template>
          <template v-else>
            <template v-if="item.type=='select'">
              {{ renderText(item,form[item.key]) }}
            </template>
            <template v-else>
              {{ form[item.key] }}
            </template>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  export default {
    props: {
      config: {
        type: Object,
        default: () => ({
          'label-suffix': ':',
          'label-width': '140px'
        })
      },
      validateAfter: {
        type: Function,
        default: null
      },
      resetAfter: {
        type: Function,
        default: null
      },
      fields: {
        type: Array,
        required: true
      },
      rules: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        form: {},
        showForm: false
      }
    },
    mounted() {
      this.fields.forEach(item => {
        this.$set(this.form, item.key, item.defaultVal)
      })
      this.showForm = true
    },
    methods: {
      // 附件上传完成 更改附件id
      uploadCompleteCb(fileList) {
        if (this.form.hasOwnProperty('fileId')) {
          this.$set(this.form, 'fileId', fileList.length ? 1 : null)
        }
      },
      // 渲染值集对应文案
      renderText(obj, code) {
        try {
          const options = obj.options
          const customKey = obj.customKey
          const t = options.find(item => {
            if (customKey) {
              return item[customKey.value] == code
            }
            return item.value == code
          })
          return customKey ? t[customKey.label] : t['label']
        } catch (e) {
          console.log(e)
          return code
        }
      },
      validate() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.validateAfter && this.validateAfter instanceof Function) {
              this.validateAfter(this.form)
            }
          }
        })
      },
      resetForm() {
        this.$refs.form.resetFields()
        for (const i in this.form) {
          this.form[i] = null
        }
        if (this.resetAfter && this.resetAfter instanceof Function) {
          this.resetAfter(this.form)
        }
      }
    }
  }
</script>
